<script>
import Scroll from '@/components/Scroll'
const staticDefId = 'landscape-def-static'
const staticScrollId = 'landscape-scroll-static'
export default {
  name: 'Landscape',
  components: {
    Scroll
  },
  props: {
    vertical: {
      type: Boolean,
      default: false
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    orientation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      landscape: window.orientation !== 0 || window.orientation !== 180
    }
  },
  mounted() {
    this.setScrollHeight()
  },
  methods: {
    // 设置scroll组件高度
    setScrollHeight() {
      const def = this.$el.querySelector(`#${staticDefId}`)
      const scroll = this.$el.querySelector(`#${staticScrollId}`)
      if (!def || !scroll) return
      const defHeight = def.getBoundingClientRect().width
      // scroll.style.height = this.height - defHeight + 'px'
      scroll.style.height = `calc(100vw - ${defHeight}px)`
      scroll.style.overflowY = 'auto'
    }
  },
  render(h) {
    if (!this.$scopedSlots.default && !this.$scopedSlots.scroll) {
      return h('span', 'none')
    }
    const landscape = this.landscape && !this.orientation
    const vnode = []
    const width = landscape ? '100vh' : '100vw'
    const height = landscape ? '100vw' : '100vh'

    if (this.$scopedSlots.default) {
      const defVnode = this.$scopedSlots.default()[0]
      defVnode.data ? '' : defVnode.data = {}
      defVnode.data.attrs ? '' : defVnode.data.attrs = {}
      defVnode.data.attrs.id = staticDefId
      vnode.push(defVnode)
    }
    if (this.$scopedSlots.scroll) {
      const scroll = this.$scopedSlots.scroll()
      const child = scroll[0]
      if (child.componentOptions) {
        const propsData = child.componentOptions.propsData || {}
        propsData.landscape = ''
        child.componentOptions.propsData = propsData
      }
      const scrollWrap = h('Scroll', {
        props: { horizontal: this.horizontal, vertical: this.vertical, hiddenBar: false },
        attrs: {
          id: staticScrollId
        }
      }, scroll)
      vnode.push(scrollWrap)
    }
    return h('div', {
      class: { landscape: landscape },
      style: {
        width,
        height
      }
    }, vnode)
  }
}
</script>
<style lang="less" scoped>
.landscape{
  overflow: hidden;
  @media all and (orientation: portrait){
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    right: 0;
    height: 100vw!important;
    width: 100vh!important;
    transform-origin: top left;
    transform: rotate(90deg);
  }
}
</style>
